<template>
  <div class="qa-container">
    <p>问答, msg:{{ msg }}</p>
    <!-- <MyInput :value="msg" @changeValue="onChangeValue" /> -->
    <!-- <MyInput :value="msg" @update:value="onChangeValue" /> -->
    <!-- <MyInput :value="msg" @update:value="msg = $event" /> -->
    <MyInput :value.sync="msg" />
    <!-- 任何的自定义组件都不支持 v-model，需要组件定义者去做支持才能用 -->
    <!-- <MyInput v-model="msg" /> -->
    <!-- v-model 是 v-bind:value 和 v-on:input 的组合 -->
    <DggInput v-model="msg" />
    <!-- 其实 v-model 默认绑定的 value 属性名 和 input 事件，可以由子组件通过 model 选项来修改掉 -->
    <DggInputCustom v-model="msg" />
    <!--
      注意：如果在父组件中，监听事件时，不是简单的赋值操作逻辑，那么就不能用 .sync 修饰符，
      因为 .sync 修饰符的功能非常纯粹，只能替代赋值操作
     -->
  </div>
</template>

<script>
import MyInput from './components/my-input'
import DggInput from './components/dgg-input'
import DggInputCustom from './components/dgg-input-custom'
export default {
  name: 'QAPage',
  components: {
    MyInput,
    DggInput,
    DggInputCustom
  },
  data () {
    return {
      msg: 'heheda'
    }
  },
  methods: {
    onChangeValue (e) {
      this.msg = e
    }
  }
}
</script>

<style scoped></style>
